<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <!-- 自定义空数据插槽 -->
      <template #empty>
        <div class="empty-state">
          <!-- 空状态图标 -->
          <el-icon class="empty-icon">
            <PictureFilled />
          </el-icon>
          <!-- 空状态文本 -->
          <p class="empty-text">暂无相关数据</p>
          <!-- 空状态操作按钮 -->
          <el-button 
            type="primary" 
            size="small" 
            @click="loadData"
          >
            重新加载
          </el-button>
        </div>
      </template>

      <!-- 表格列定义 -->
      <el-table-column
        prop="date"
        label="日期"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { PictureFilled } from '@element-plus/icons-vue'; // 引入Element图标

export default {
  components: {
    PictureFilled // 注册图标组件
  },
  data() {
    return {
      tableData: [] // 空数据，触发空状态
    };
  },
  methods: {
    // 重新加载数据方法
    loadData() {
      this.$message.info('正在加载数据...');
      // 实际项目中这里会有异步请求数据的逻辑
      setTimeout(() => {
        this.tableData = [
          { date: '2023-05-01', name: '张三', address: '北京市朝阳区' },
          { date: '2023-05-02', name: '李四', address: '上海市浦东新区' }
        ];
        this.$message.success('数据加载成功');
      }, 1000);
    }
  }
};
</script>

<style scoped>
.empty-state {
  text-align: center;
  padding: 40px 0;
}

.empty-icon {
  font-size: 48px;
  color: #ccc;
  margin-bottom: 16px;
}

.empty-text {
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}
</style>
    